<template>
<div>
	<!-- <div class="bigtitle">
		<div class="bigtitle-title">我的订单</div>
	</div> -->

	<p text-center sz3>我的订单</p>

	<Tabs v-model="tab" size="small" @on-click=handleTabChange>
        <TabPane name="all" label="全部订单"></TabPane>
        <TabPane name="pendingPay" label="待付款"></TabPane>
        <TabPane name="shipped" label="待收货"></TabPane>
        <TabPane name="finished" label="已完成"></TabPane>
        <TabPane name="closed" label="已关闭"></TabPane>
    </Tabs>

	<div v-if="!isPhone">
		<table class="minitable minitable-easy" mgt2 long>
			<tr>
				<th>商品</th>
				<th w5>数量</th>
				<th w5>小计</th>
				<th w5>状态</th>
				<th w5>操作</th>
			</tr>
		</table>
		<table border="0" cellspacing="0" cellpadding="0" class="minitable" v-for="(item, index) in items" :key="index" mgt3 long>
			<tr>
				<td colspan="5" pd2 bg-gray5>
					<span mgr3>订单号：{{item.orderNumber}}</span>
					<span>交易时间：{{formatTimeStr(item.info.creationTime)}}</span>
				</td>
			</tr>
			<tr v-if="canCancelOrder(item) && item.paymentInfo.paymentType==0">
				<td colspan="5" pd2 style="background-color: rgba(242, 166, 84, 0.2);">
					<span>订单会在 <span red>{{getRemainHour(item.info.creationTime)}}</span> 小时 <span red>{{getRemainMinute(item.info.creationTime)}}</span> 分钟 后取消，请尽快完成付款</span>
				</td>
			</tr>
			<tr>
				<td nopd>
					<table border="0" cellspacing="0" cellpadding="0" class="minitable-child" long>
						<tr v-for="(item2, index2) in item.details" :key="index2">
							<td style="border-right:0;" pd2>
								<order-detail-profile :detail="item2"></order-detail-profile>
							</td>
							<td text-center w5 style="border-right:0;">x{{item2.count}}</td>
							<td text-center w5>{{item2.totalAmount}}</td>
						</tr>
					</table>
				</td>
				<td text-center w5>{{getOrderStatus(item)}}</td>
				<td text-center w5>
					<p>
						<router-link :to="{name:'member-order-detail', params:{ordernumber:item.orderNumber}}">查看订单</router-link>
					</p>
					<p>
						<span v-if="canCancelOrder(item)" linkable blue @click="handleCancelOrder(item.orderNumber,handleGetAll)">取消订单</span>
						<span v-if="canDeleteOrder(item)" linkable blue @click="handleDeleteOrder(item.orderNumber,handleGetAll)">删除订单</span>
						<span v-if="canConfirmReceived(item)" linkable blue @click="handleConfirmReceipt(item.orderNumber,handleGetAll)">确认收货</span>
					</p>
				</td>
			</tr>
			<tr>
				<td colspan="5" pd2 text-right>
					<span>应付金额：￥{{item.info.totalAmount}}（含运费￥{{item.info.freightAmount}}  优惠：￥{{item.info.xpAmount + item.info.couponAmount}})</span>
					<span v-if="canPaymentOrder(item)" bg-red-linkable white pd1 mgl2 @click="handleGoPayment(item.orderNumber)">去支付</span>
				</td>
			</tr>
		</table>
	</div>
	<div v-else>
		<Card v-for="(item, index) in items" :key="index" :padding=0 mgt2>
			<p pd1 bdb-gray4>
				<span>订单号：{{item.orderNumber}}</span>
				<span right blue>{{getOrderStatus(item)}}</span>
			</p>
			
			<p v-if="canCancelOrder(item) && item.paymentInfo.paymentType==0" pd1 style="background-color: rgba(242, 166, 84, 0.2);">
				<span>订单会在 <span red>{{getRemainHour(item.info.creationTime)}}</span> 小时 <span red>{{getRemainMinute(item.info.creationTime)}}</span> 分钟 后取消，请尽快完成付款</span>
			</p>

			<Row pdx1>
				<Col v-for="(item2, index2) in item.details" :key="index2" span="24" mgt2>
					<order-detail-profile :detail="item2">
						<p slot="detail" blue>￥{{item2.price}}</p>
    					<div slot="right" gray3>x{{item2.count}}</div>
					</order-detail-profile>
				</Col>
			</Row>

			<p text-right mgt2 mgr2>合计：<span blue>￥{{item.info.totalAmount}}</span></p>
			<p text-right mgt1 mgr2 gray3 sz0>（含运费￥{{item.info.freightAmount}}  优惠：￥{{item.info.xpAmount + item.info.couponAmount}})</p>
			<p text-right pdy2>
				<Button mgr2 :to="{name:'member-order-detail', params:{ordernumber:item.orderNumber}}">查看订单</Button>
				<Button v-if="canCancelOrder(item)" mgr2 @click="handleCancelOrder(item.orderNumber,handleGetAll)">取消订单</Button>
				<Button v-if="canDeleteOrder(item)" mgr2 @click="handleDeleteOrder(item.orderNumber,handleGetAll)">删除订单</Button>
				<Button v-if="canConfirmReceived(item)" mgr2 @click="handleConfirmReceipt(item.orderNumber,handleGetAll)">确认收货</Button>
				<Button v-if="canPaymentOrder(item)" type="error" mgr2 @click="handleGoPayment(item.orderNumber)">去支付</Button>
			</p>
		</Card>
	</div>

    <AutoPage :value="page" text-right mgt2></AutoPage>
</div>
</template>

<script lang="ts">
;import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import OrderBase from './OrderBase';
import AutoPage from '@common/components/AutoPage';
import OrderDetailProfile from '../../../components/common/order-detail-profile.vue';

@Component({
    components: { AutoPage, OrderDetailProfile }
})
export default class MyOrder extends OrderBase{
	tab = 'all'
	getRemainHour(timeStr) {
		var temp = this.getRemainStamp(timeStr);
		if(temp < 0) return '00';
		else {
			var num = Math.floor(temp / (1000 * 60 * 60));
			if(num < 10) return '0' + num;
			else return num;
		}
	}
	getRemainMinute(timeStr) {
		var temp = this.getRemainStamp(timeStr);
		if(temp < 0) return '00';
		else {
			var temp2 = temp % (1000 * 60 * 60);
			var num = Math.floor(temp2 / (1000 * 60));
			if(num < 10) return '0' + num;
			else return num;
		}
	}
	getRemainStamp(timeStr) {
		var creationStamp = new Date(timeStr).getTime() + 1000 * 60 * 60;
		var nowStamp = Date.now();
		var temp = creationStamp - nowStamp;
		return temp;
	}
	handleTabChange(name) {
		this.page.current_page = 1;
		this.page.getData();
	}
	created() {
		this.page.beforeGetData.push(() => {
			this.page.action_data.status = this.tab;
		});
	}
}
</script>